<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>


<body>
    <!-- 1. -->
    <div id="example1">
        <my-component1 @click.native="doTheThing"></my-component1>
        <p>{{message}}</p>
    </div>
    
    <script>
        Vue.component('my-component1', {
            template: '<button>按钮</button>',
        })
        new Vue({
            el: '#example1',
            data() {
                return { message: 0 }
            },
            methods: {
                doTheThing() {
                    this.message++;
                }
            },

        })
    </script>

    <!-- 2. -->
    <div id="example2">
        <my-component2 @click.native="doTheThing"></my-component2>
        <p>{{message}}</p>
    </div>

    <script>
        Vue.component('my-component2', {
            template: '<button>按钮</button>',
        })
        new Vue({
            el: '#example2',
            data: {
                message: 0
            },
            methods: {
                doTheThing() {
                    this.message++;
                }
            },
            
        })
    </script>

    <!-- 3. -->
    <div id="example3">
        <my-component3></my-component3>
    </div>

    <script>
        // 注册
        var data = { counter: 0 }
        Vue.component('my-component3', {
            template: '<button v-on:click="counter += 1">{{ counter }}</button>',
            data: function () {
                return data;
            }
        })
        // 创建根实例
        new Vue({
            el: '#example3'
        })
    </script>

    <!-- 4. -->
    <div id="example4">
        <button @click="doTheThing">按钮</button>
        <p>{{message}}</p>
    </div>
    
    <script>
        new Vue({
            el: '#example4',
            data: {
                message: 0
            },
            methods: {
                doTheThing() {
                    this.message++;
                }
            },

        })
    </script>

    总结：
        1.@click.native 与 @click 前者用于自定义模板，后者用于平常的html标签<br>
        2.data() {
            return {message: 0}
        }<br>
        data: {
            message: 0
        }
        两者相同
</body>
</html>